import React from 'react'
import { List, message, Avatar, Spin, Space, Skeleton } from 'antd';
import reqwest from 'reqwest';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';

import styles from './index.less'

import InfiniteScroll from 'react-infinite-scroller';

// const fakeDataUrl = 'https://randomuser.me/api/?results=20&inc=name,gender,email,nat&noinfo'; 
const dataUrl = "https://120.76.193.53/app/mock/data/2061619?scope=response&id="


const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

class InfiniteListExample extends React.Component {

  state = {
    data: [],
    initialLoading: true,
    loading: false,
    hasMore: true,
  };

  componentDidMount() {
    this.fetchData(res => {
      this.setState({
        data: res.data.assay,
        initialLoading: false,
      });
    });
  }

  fetchData = callback => {
    reqwest({
      url: dataUrl,
      type: 'json',
      method: 'get',
      contentType: 'application/json',
      success: res => {
        callback(res);
      },
    });
  };

  handleInfiniteOnLoad = () => {
    let { data } = this.state;

    this.setState({
      loading: true,
    });

    if (data.length > 1000000) {
      message.warning('没有更多了哦！');
      this.setState({
        hasMore: false,
        loading: false,
      });
      return;
    }

    this.fetchData(res => {
      data = data.concat(res.data.assay);
      this.setState({
        data,
        loading: false,
      });
    });
  };

  showSkeleton = () => {
    return (
      <div>
        <Skeleton active avatar paragraph={{ rows: 4 }} />
        <Skeleton active avatar paragraph={{ rows: 4 }} />
        <Skeleton active avatar paragraph={{ rows: 4 }} />
        <Skeleton active avatar paragraph={{ rows: 4 }} />
        <Skeleton active avatar paragraph={{ rows: 4 }} />
      </div>
    )
  }

  render() {
    return (
      <div style={{ padding: '16px 24px' }}>
        <div className={styles["demo-infinite-container"]}>
          <InfiniteScroll
            initialLoad={false}
            pageStart={0}
            loadMore={this.handleInfiniteOnLoad}
            hasMore={!this.state.loading && this.state.hasMore}
          // useWindow={false}
          >
            {this.state.initialLoading && this.showSkeleton()}
            <List
              rowKey={'id'}
              className={styles['essay-list']}
              itemLayout='vertical'
              dataSource={this.state.data}
              renderItem={item => (
                <List.Item
                  actions={[
                    <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                    <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                    <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                  ]}
                >
                  <List.Item.Meta
                    avatar={
                      <Avatar size={50} src={item.avatar} />
                    }
                    title={<a href="http://jielihaofeng.online" >{item.creator}</a>}
                    description={`${item.createTime} 来自 ${item.origin}`}
                  />
                  <div className={styles['essay-content']} dangerouslySetInnerHTML={{ __html: `${item.content}` }}>
                  </div>
                </List.Item>
              )}
            >
              {this.state.loading && this.state.hasMore && (
                <div className={styles["demo-loading-container"]}>
                  <Spin tip="更多随笔即将到来~" />
                </div>
              )}
            </List>
          </InfiniteScroll>
        </div>
      </div >
    );
  }
}

export default InfiniteListExample